<template>
	<view>
		<view class="title-cont">
			<view>学生应到人数:??? </view>
			<view>学生实到人数:??? </view>
		</view>
		<inpNum @change="changeNum" :value="classRoom.truancy" :title="'学生旷课人数'" />
		<inpNum @change="changeNum1" :value="classRoom.privateHoliday" :title="'学生私假人数'" />
		<inpNum @change="changeNum2" :value="classRoom.publicHoliday" :title="'学生公假人数'" />
	</view>
</template>

<script>
	import inpNum from './inputNumber.vue'
	export default {
		props:['classRoom'],
		mounted() {
			console.log(this.classRoom)
		},
		watch:{
			classRoom:{
				handler(newVal){
					this.$emit('change',newVal)
				},
				deep: true
			}
		},
		methods:{
			changeNum(newVal){
				this.classRoom.truancy = newVal;
			},
			changeNum1(newVal){
				this.classRoom.privateHoliday = newVal;
			},
			changeNum2(newVal){
				this.classRoom.publicHoliday = newVal;
			}
		},
		components:{
			inpNum
		}
	}
</script>

<style lang="scss" scoped>
.title-cont{
		display: flex;
		justify-content: space-between;
		padding: 10px 10px;
		font-size:13px;
	}
</style>
